<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<navbar title="数据报表"></navbar>

		<view class="query-line flex row-between">
			<view class="title">{{$zhTran('时间筛选')}}</view>
			<view class="flex" @click="chooseTime">
				<text>{{time.desc}}</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
		</view>

		<view class="query-line flex row-between" v-if="time.value == 'diy'">
			<view class="date" @click="showTimeVisible=true">{{timeRange.start_desc}}</view>
			<view class="line"></view>
			<view class="date" @click="showTimeVisible=true">{{timeRange.end_desc}}</view>
		</view>

		<view class="query-line">
			<view class="flex row-between">
				<view class="title">{{$zhTran('数据汇总')}}</view>
				<view class="flex" @click="chooseSaleman">
					<text>{{queryObj.csppl_sale==''?$zhTran('所有人'):queryObj.csppl_saleman}}</text>
					<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
				</view>
			</view>

			<view class="query-main flex row-between m-t-20">
				<view class="box">
					<view class="num">{{chartData.order_count}}</view>
					<view class="desc">{{$zhTran('订单总数量')}}</view>
				</view>
				<view class="box">
					<view class="num">{{chartData.order_amount}}</view>
					<view class="desc">{{$zhTran('订单总金额')}}</view>
				</view>
				<view class="box">
					<view class="num">{{chartData.order_profit}}</view>
					<view class="desc">{{$zhTran('订单总收益')}}</view>
				</view>
			</view>
		</view>

		<view class="chart-line">
			<view class="chart-head flex row-between">
				<view class="title">{{$zhTran('数据报表')}}</view>
				<view class="flex" @click="chooseChart">
					<text>{{queryObj.chart_desc}}</text>
					<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
				</view>
			</view>

			<view class="chart-main m-t-20">
				<qiun-data-charts type="line" :chartData="chartOption" :opts="opts" :ontouch="true" />
			</view>
		</view>

		<view class="query-line table">
			<view class="thead flex">
				<view class="th">{{$zhTran('订单时间')}}</view>
				<view class="th">{{$zhTran('订单数量')}}</view>
				<view class="th">{{$zhTran('订单金额')}}</view>
				<view class="th">{{$zhTran('订单收益')}}</view>
			</view>

			<view class="tbody">
				<view class="td-item flex" v-for="item,idx in chartTable" :key="idx">
					<view class="td">{{item.date}}</view>
					<view class="td">{{item.order_count}}</view>
					<view class="td">{{item.order_amount}}</view>
					<view class="td">{{item.order_profit}}</view>
				</view>
			</view>
		</view>
		<u-gap height="80"></u-gap>

		<u-popup v-model="showVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopup">
			<view class="time-box" v-if="mode=='time'">
				<view class="time-header">{{$zhTran('时间')}}</view>
				<view class="time-main">
					<view :class="time.value == 'week'?'selected time-sel':' time-sel'" @click="queryTime('week','本周')">
						{{$zhTran('本周')}}
					</view>
					<view :class="time.value == 'month'?'selected time-sel':' time-sel'"
						@click="queryTime('month','本月')">{{$zhTran('本月')}}</view>
					<view :class="time.value == 'year'?'selected time-sel':' time-sel'" @click="queryTime('year','本年')">
						{{$zhTran('本年')}}
					</view>
					<view :class="time.value == 'diy'?'selected time-sel':' time-sel'" @click="queryTime('diy','自定义')">
						{{$zhTran('自定义')}}
					</view>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="time-footer">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="showVisible=false">{{$zhTran("取消")}}</button>
				</view>
			</view>
			<view class="time-box" v-if="mode=='chart'">
				<view class="time-header">{{$zhTran('报表类型')}}</view>
				<view class="time-main">
					<view :class="queryObj.chart_type == 'order_count'?'selected time-sel':' time-sel'"
						@click="queryChart('order_count','订单数量')">
						{{$zhTran('订单数量')}}
					</view>
					<view :class="queryObj.chart_type == 'order_amount'?'selected time-sel':' time-sel'"
						@click="queryChart('order_amount','订单金额')">{{$zhTran('订单金额')}}</view>
					<view :class="queryObj.chart_type == 'order_profit'?'selected time-sel':' time-sel'"
						@click="queryChart('order_profit','订单收益')">
						{{$zhTran('订单收益')}}
					</view>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="time-footer">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="showVisible=false">{{$zhTran("取消")}}</button>
				</view>
			</view>
		</u-popup>


		<u-calendar v-model="showTimeVisible" mode="range" @change="getDateValue"></u-calendar>

		<u-back-top :scroll-top="scrollTop" :top="1000" :customStyle="{
			backgroundColor: '#4073fa',
			boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)',
		}" :iconStyle="{
			color: '#fff',
		}">
		</u-back-top>
	</view>
</template>


<script>
	import {
		apiCitySupplierChartData
	} from '@/api/citysupplier'
	export default {
		name: 'ChartData',
		data() {
			return {
				chartData: {},
				chartTable: [],
				queryObj: {
					csppl_id: '',
					csppl_sale: '',
					csppl_saleman: '',
					chart_type: 'order_count',
					chart_desc: this.$zhTran('订单数量'),
				},
				time: {
					value: 'month',
					desc: this.$zhTran('本月'),
				},
				timeRange: {
					start: '',
					start_desc: this.$zhTran('开始时间'),
					end: '',
					end_desc: this.$zhTran('结束时间'),
				},
				showVisible: false,
				showTimeVisible: false,
				mode: 'time',
				chartOption: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 15],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4,
						boundaryGap: "justify"
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				scrollTop: 0,
			}
		},

		computed: {},

		methods: {
			refreshOrderData() {
				apiCitySupplierChartData({
					...this.queryObj,
					time_type: this.time.value,
					start_time: this.timeRange.start,
					end_time: this.timeRange.end,
				}).then(({
					data,
					chart,
					table
				}) => {
					this.chartData = data
					this.chartOption = this.$zhTran(chart)
					this.chartTable = this.$zhTran(table)
				})
			},
			closePopup() {
				this.showVisible = false
			},
			chooseTime() {
				this.mode = 'time'
				this.showVisible = true
			},
			chooseChart() {
				this.mode = 'chart'
				this.showVisible = true
			},
			queryTime(value, desc) {
				this.time.desc = this.$zhTran(desc)
				this.time.value = value
				if (value != 'diy') {
					this.refreshOrderData()
				}
				this.closePopup()
			},
			getDateValue(e) {
				console.log(e)
				this.timeRange.start = e.startDate
				this.timeRange.start_desc = e.startDate
				this.timeRange.end = e.endDate
				this.timeRange.end_desc = e.endDate
				this.refreshOrderData()
			},
			queryChart(value, desc) {
				this.queryObj.chart_desc = this.$zhTran(desc)
				this.queryObj.chart_type = value
				this.refreshOrderData()
				this.closePopup()
			},
			chooseSaleman() {
				var that = this
				uni.navigateTo({
					url: "/bundle2/pages/citysupplier/choose_saleman",
					success(res) {
						res.eventChannel.emit("receiveData", {
							...that.queryObj,
							del_sale: '',
							title: that.$zhTran('业务员'),
						});
					},
					events: {
						reSetData(nres) {
							console.log(nres)
							let res = that.$zhTran(nres)
							that.queryObj.csppl_sale = res.value
							that.queryObj.csppl_saleman = res.label
							that.refreshOrderData()
						}
					},
				});
			},
		},
		onLoad() {
			const options = this.$Route.query
			console.log(options)
			this.queryObj.csppl_id = options.csppl_id

			this.refreshOrderData()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e;
			this.scrollTop = scrollTop;
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.query {

			&-line {
				padding: 20rpx 40rpx;
				margin: 20rpx 20rpx 0 20rpx;
				border-radius: 5px;
				background-color: #FFFFFF;

				&.table {
					.thead {
						padding: 20rpx 20rpx 30rpx 20rpx;
						border-bottom: 1rpx solid rgba(241, 241, 241, 1);

						.th {
							color: rgba(128, 128, 128, 1);
							font-size: 24rpx;
							width: 25%;
						}
					}

					.tbody {
						padding: 20rpx;

						.td-item {
							margin-bottom: 20rpx;

							.td {
								color: #000;
								font-size: 24rpx;
								width: 25%;
							}
						}
					}
				}

				.title {
					color: rgba(56, 56, 56, 1);
					font-size: 32rpx;
					font-weight: bold;
				}

				.line {
					height: 5rpx;
					width: 30rpx;
					background-color: rgba(166, 166, 166, 1);
				}

				.date {
					border: 1rpx solid rgba(243, 243, 243, 1);
					width: calc((100% - 70rpx) / 2);
					text-align: center;
					padding: 20rpx;
				}
			}

			&-main {
				padding: 30rpx;

				.box {
					text-align: center;

					.num {
						color: rgba(64, 115, 250, 1);
						font-size: 40rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.desc {
						color: rgba(128, 128, 128, 1);
						font-size: 26rpx;
					}
				}
			}
		}

		.chart {

			&-line {
				margin: 20rpx 20rpx 0 20rpx;
				border-radius: 5px;
				background-color: #FFFFFF;
			}

			&-head {
				padding: 20rpx 40rpx;
			}

			&-main {
				padding: 20rpx;
				width: 100%;
				height: 600rpx;
			}
		}

	}

	.time {

		&-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 0 30rpx 30rpx 30rpx;

			.time-sel {
				color: rgba(56, 56, 56, 1);
				background-color: rgba(246, 247, 249, 1);
				font-size: 28rpx;
				padding: 30rpx;
				text-align: center;
				margin-bottom: 15rpx;

				&.selected {
					color: #fff;
					background-color: rgba(64, 115, 250, 1);
				}
			}
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
				}
			}
		}
	}
</style>